<script setup lang="ts">
import { ref, reactive } from 'vue'
const count = ref(0)
/* 
定义响应式对象
*/
const state = reactive({
  name: '孙悟空',
  age: 400
})
function update() {
  count.value++
}
function updateDate() {
  state.name = '猪八戒'
  state.age = 1000
}
</script>

<template>
  <div class="card">
    <button type="button" @click="update">count is {{ count }}</button>
  </div>
  <div class="name">
    <div>{{ state.name }}</div>
    <div>{{ state.age }}</div>
    <button @click="updateDate">更新数据</button>
    <el-button type="primary" size="default" @click="">看我是个啥</el-button>

  </div>
  <div>
    <h1>引入图标</h1>
    <svg-icon iconName="icon-zhifubao" className="icon"></svg-icon>
    <svg-icon iconName="icon-xiaochengxu1" className="icon"></svg-icon>
  </div>
</template>

<style scoped>
.icon {
  font-size: 100px;
}
</style>
